<template>
  <el-dialog class="permissionDialogWrapper" :title="dialogTitle" :visible.sync="dialogVisible" :width="width"
             :append-to-body="true" @open="beforeOpen" @closed="afterClose">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small"
             :disabled="submitLoading || queryLoading">
      <el-row :gutter="16">
        <el-col :span="24" v-if="this.type !== this.typeAdd">
          <el-form-item label="权限ID" prop="permissionId"
                        :rules="[{ required: true, message: '权限ID不能为空', trigger: 'blur' }]">
            <el-input :disabled="true" type="text" v-model="form.permissionId" placeholder="权限ID"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权限编号" prop="permissionCode">
            <el-input type="text" v-model="form.permissionCode" placeholder="权限编号"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权限名称" prop="permissionName">
            <el-input type="text" v-model="form.permissionName" placeholder="权限名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权限描述" prop="permissionDesc">
            <el-input type="text" v-model="form.permissionDesc" placeholder="权限描述"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button @click="closeDialog" size="small">取消</el-button>
      <el-button v-if="type === this.typeAdd || type === this.typeEdit" @click="resetDialog" :loading="queryLoading" icon="el-icon-refresh"
                 :disabled="queryLoading || submitLoading" size="small">重置</el-button>
      <el-button v-if="type === this.typeAdd || type === this.typeEdit" @click="handleValidateData" size="small">校验</el-button>
      <el-button v-if="type === this.typeEdit" type="primary" @click="handleChangePermission" size="small"
                 :disabled="queryLoading || submitLoading" :loading="submitLoading">提交修改</el-button>
      <el-button v-if="type === this.typeAdd" type="primary" @click="handleAddPermission"
                 :loading="submitLoading" size="small">添加</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ResultCode } from '@/constants/constants'
import { changePermissionById, insertPermission, queryPermissionById } from '@/api/ApiPermission'
import PermissionInsertDTO from '@/api/entity/PermissionInsertDTO'
import PermissionChangeDTO from '@/api/entity/PermissionChangeDTO'

export default {
  name: 'PermissionDialog',
  props: {
    visible: {
      required: true,
      type: Boolean
    },
    width: {
      require: false,
      type: String,
      default: '40%'
    },
    type: {
      require: true,
      type: String
    },
    id: {
      require: false,
      type: [String, Number],
      default: 0
    }
  },
  model: {
    prop: 'visible',
    event: 'visible'
  },
  data () {
    return {
      dialogVisible: false,
      typeAdd: 'add',
      typeEdit: 'edit',
      form: this.initDialogData(),
      rules: {
        permissionCode: [
          { required: true, message: '权限编号不能为空', trigger: 'blur' }
        ],
        permissionName: [
          { required: true, message: '权限名称不能为空', trigger: 'blur' }
        ],
        permissionDesc: [
          { required: true, message: '权限描述不能为空', trigger: 'blur' }
        ]
      },
      queryLoading: false,
      submitLoading: false
    }
  },
  computed: {
    dialogTitle () {
      switch (this.type) {
        case this.typeAdd:
          return '添加权限'
        case this.typeEdit:
          return '编辑权限'
      }
      return ''
    }
  },
  methods: {
    closeDialog () {
      this.dialogVisible = false
    },
    initDialog () {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    initDialogData () {
      this.initDialog()
      return {}
    },
    queryPermissionToDialog () {
      this.queryLoading = true
      queryPermissionById(this.id, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          this.form = data
        }
      }, () => {
        this.queryLoading = false
      })
    },
    beforeOpen () {
      // 添加权限数据
      switch (this.type) {
        case this.typeAdd:
          this.form = this.initDialogData()
          break
        case this.typeEdit:
          this.form = this.initDialogData()
          this.queryPermissionToDialog()
          break
        default:
      }
    },
    afterClose () {
      this.form = this.initDialogData()
    },
    resetDialog () {
      if (this.type === this.typeEdit) {
        this.queryPermissionToDialog()
      } else if (this.type === this.typeAdd) {
        this.initDialogData()
      }
    },
    handleAddPermission () {
      this.$refs.form.validate((success) => {
        if (success) {
          const permissionDTO = PermissionInsertDTO.instance()
          Object.assign(permissionDTO, this.form)
          permissionDTO.permissionId = undefined
          this.submitLoading = true
          insertPermission([permissionDTO], () => {
            this.$message.success('添加权限数据成功')
            this.closeDialog()
            this.$emit('update')
          }, () => {
            this.submitLoading = false
          })
        }
      })
    },
    /**
       * 校验数据
       */
    handleValidateData () {
      this.$refs.form.validate((success) => {
        if (success) {
          this.$message.success('校验成功')
        } else {
          this.$message.error('校验失败')
        }
      })
    },
    handleChangePermission () {
      this.$refs.form.validate((success) => {
        if (success) {
          const permissionChangeDTO = PermissionChangeDTO.instance()
          Object.assign(permissionChangeDTO, this.form)
          this.submitLoading = true
          changePermissionById([permissionChangeDTO], data => {
            if (data && data.code === ResultCode.OK) {
              this.$message.success('更新成功')
              this.closeDialog()
              this.$emit('update')
            }
          }, () => {
            this.submitLoading = false
          })
        }
      })
    }
  },
  watch: {
    dialogVisible (value) {
      this.$emit('visible', value)
    },
    visible (val) {
      if (this.dialogVisible !== val) {
        this.dialogVisible = val
      }
    }
  }
}
</script>

<style scoped lang="scss">
.permissionDialogWrapper{

}
</style>
